<template>
	<div>
		  <el-button type="primary" plain size="mini" @click="handlerAdd">添加</el-button>

		 <el-table size="mini"  :data="tableData"  style="width: 100%"  max-height="750">
			  <el-table-column  prop="id"  label="主键"  width="180"> </el-table-column>
			  <el-table-column  prop="name"  label="部门名称"  > </el-table-column>
			  <el-table-column  prop="address"  label="办公地址"  > </el-table-column>
			  <el-table-column  prop="leader"  label="部门领导"  > </el-table-column>
			  <el-table-column  prop="active"  label="数据状态" > </el-table-column>
			  <el-table-column  prop="createtime"  label="创建时间" > </el-table-column> 
			  <el-table-column    label="操作" >
				    <template slot-scope="scope">
					   <el-button
						 size="mini"
						 @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					   <el-button
						 size="mini"
						 type="danger"
						 @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					 </template>
			  </el-table-column> 
		</el-table>
		
		
		
		<el-dialog title="部门编辑"  :visible.sync="dialogVisible"  width="500px" >
				<edit @reload="queryData" :visible.sync="dialogVisible" v-if="dialogVisible" :id="id"></edit>
		</el-dialog>
		
		
	</div>
</template>

<script>
	// 引入axios
	import axios from 'axios'
	import edit from './edit'
	
	//封装之后
	
	
	export default {
		name:'ToDoList',
		//注册局部组件
		components:{edit},
		data(){
			return  {
				dialogVisible:false,
				id:undefined,
				tableData: []
			}
		},
		methods:{
			handleEdit(index,row){
				this.dialogVisible = true;//打开编辑框
				this.id = row.id	
			},
			handleDelete(index,row){
				
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					
						//真正删除
						axios.get('/api/axios_dept',{
							params:{
								_type:'delete',
								id:row.id
							}
						}) .then( (ret) => {
						
							//axios 将请求结果 封装到 response的内容里面
							if(ret.data){
								//重新查询结果
								this.queryData()
								//提示
								this.$message({ type: 'success', message: '删除成功!'  });
							}
						  })
						  .catch(function (error) {
							// 处理错误情况
							console.log(error);
						  });

				 
				});
				
				
							
				
				
			},
			handlerAdd(){
				this.id = null;
				this.dialogVisible=true
			},
			queryData(){
				// http://localhost:8080/mvc/axios_dept?_type=list
				//
				// axios.get('/api/axios_dept?_type=list') .then( (response) => {
				
				// 	//axios 将请求结果 封装到 response的内容里面
				// 	this.tableData = response.data;
				//   })
				//   .catch(function (error) {
				// 	// 处理错误情况
				// 	console.log(error);
				//   });
			}
		},
		computed:{
			
		},
		//在组件呗创建的时候加载数据 初始化
		created() {
			console.log("准备查询数据....")
			this.queryData()
		}
	}
</script>

<style>
	
	
</style>
